<template>
  <div>
    <div class="app-editstatus-button">
      <el-switch v-model="editStatus"></el-switch>
    </div>
    <form-panel ref="formBase" :template="template" :data="app" @changeData="changeData" :editStatus="editStatus">
      <template slot="foot" v-if="editStatus">
        <el-button size="small" type="primary" @click="save">保存</el-button>
        <el-button size="small" @click="$refs.formBase.redata();">重置</el-button>
      </template>
    </form-panel>
    <div>
      <div class="app-panel-title">
        <h5>权限</h5>
        <el-button-group>
          <el-button size="small" type="text" icon="el-icon-circle-plus-outline" @click="toAddOper">添加权限</el-button>
        </el-button-group>
      </div>
      <div class="app-panel-content">
        <el-table :data="opers" style="width: 100%">
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="toUpOper(scope.row)" type="text">
                <font-awesome-icon icon="edit"/>
              </el-button>
              <el-button @click="delOper(scope.row)" type="text">
                <font-awesome-icon icon="trash"/>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="编号" width="200"></el-table-column>
          <el-table-column prop="name" label="名称" width="200"></el-table-column>
          <el-table-column prop="description" label="说明"></el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="功能设置" :visible.sync="operDialog" :append-to-body="true">
      <el-form :model="oper" label-width="80px" @keyup.enter.native="saveOper">
        <el-form-item label="编码">
          <el-input v-model="oper.code"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="oper.name"></el-input>
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="oper.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="operDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveOper">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["id"],
  data() {
    return {
      editStatus: false,
      template: {},
      app: {},
      appTemp: {},
      opers: [],
      oper: {},
      operDialog: false
    };
  },
  created() {
    var that = this;
    import("./app.tp.info.json").then(function(data) {
      that.template = data.default;
    });
  },
  watch: {
    id: {
      handler: function() {
        this.init();
        this.getApp();
        this.getOpers();
      },
      immediate: true
    }
  },
  methods: {
    getApp() {
      this.$http({
        url: "/core/api/app-apps/" + this.id,
        method: "GET"
      }).then(resp => {
        this.app = resp.data;
      });
    },
    init() {
      this.app = {};
      this.permissions = [];
      this.editStatus = false;
    },
    changeData(appTemp) {
      this.appTemp = appTemp;
    },
    save() {
      this.$http({
        url: "/core/api/app-apps/",
        method: "PUT",
        data: this.appTemp
      }).then(resp => {
        this.app = resp.data;
        this.$message({
          message: "保存成功！",
          type: "success"
        });
        this.editStatus = false;
      });
    },
    getOpers() {
      this.$http({
        url: "/core/api/app/" + this.id + "/opers",
        method: "GET"
      }).then(resp => {
        this.opers = resp.data;
      });
    },
    toAddOper() {
      this.oper = {};
      this.operDialog = true;
    },
    toUpOper(row) {
      this.$http({
        url: "/core/api/app-opers/" + row.id,
        method: "GET"
      }).then(resp => {
        this.oper = resp.data;
        this.operDialog = true;
      });
    },
    saveOper() {
      var type;
      if (this.oper.id != undefined) {
        type = "PUT";
      } else {
        type = "POST";
        this.oper.appId = this.id;
      }
      this.$http({
        url: "/core/api/app-opers",
        method: type,
        data: this.oper
      }).then(() => {
        this.$message({
          message: "保存成功！",
          type: "success"
        });
        this.operDialog = false;
        this.getOpers();
      });
    },
    delOper(row) {
      this.$confirm("此操作将永久删除该功能, 是否继续?", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning"
      }).then(() => {
        this.$http({
          url: "/core/api/app-opers/" + row.id,
          method: "DELETE"
        }).then(() => {
          this.$message({
            message: "删除成功！",
            type: "success"
          });
          this.getOpers();
        });
      });
    }
  }
};
</script>
